<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:white;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view
      class="close-button"
      @click="$emit('update:show', false)"
    >
      <wd-icon
        name="close"
        size="36rpx"
        color="#333333"
      />
    </view>
    <view class="title">
      {{ title }}
    </view>
    <template v-if="edit">
      <view class="textarea-container">
        <v-textarea
          :model-value="modelValue"
          placeholder="请输入订单备注"
          :custom-style="{ height: '350rpx' }"
          :maxlength="200"
          @update:model-value="$emit('update:model-value', $event)"
        />
      </view>
      <view class="submit-button-container">
        <v-button
          type="primary"
          :custom-style="{ height: '80rpx' }"
          @click="$emit('submit')"
        >
          确定
        </v-button>
      </view>
    </template>
    <template v-else>
      <view class="textarea-container">
        <view class="text">
          {{ modelValue }}
        </view>
      </view>
    </template>
  </wd-popup>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: string;
  show: boolean;
  title: string;
  edit?: boolean;
}>();

defineEmits<{
  'update:model-value': [val: string];
  'update:show': [val: boolean];
  submit: [];
}>();
</script>

<style lang="scss" scoped>
.back-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  text-align: center;
}

.textarea-container {
  margin: 24rpx 24rpx 60rpx;
  .text {
    color: #333333;
    white-space: pre-wrap;
  }
}

.submit-button-container {
  margin: 24rpx;
  padding: 10rpx 0;
}
</style>
